@mixin fontStyle {
  @apply text-white text-base opacity-60;
}

@keyframes scales {
  0% {
    transform: translateY(-50%) scale(1.1);
  }

  50% {
    transform: translateY(-50%) scale(0.9);
  }

  100% {
    transform: translateY(-50%) scale(1);
  }
}

.input {
  @apply flex items-center relative pr-3 h-10 mr-10;
  width: 1.875rem;
  border-radius: 2.5rem;

  &.inputActive {
    @apply bg-white-10;
    width: 25rem;
    padding-left: 1.125rem;

    & > input {
      @apply block flex-1;
    }

    .img {
      @apply right-3;
    }
  }

  & > input {
    @apply w-0 h-full bg-transparent border-0 outline-0;
    @include fontStyle;

    &::placeholder {
      @include fontStyle;
    }
  }

  .img {
    @apply absolute top-2/4 right-0 cursor-pointer object-contain;
    width: 1.875rem;
    height: 1.875rem;
    transform: translateY(-50%);

    &:hover {
      animation: scales 0.5s ease;
    }
  }
}

@media screen and (max-width: 54.375rem) {
  .input {
    &.inputActive {
      width: 11rem;
    }
  }
}

@media screen and (min-width: 54.4375rem) and (max-width: 68.75rem) {
  .input {
    &.inputActive {
      width: 16.75rem;
    }
  }
}

@media screen and (min-width: 68.8125rem) and (max-width: 91.25rem) {
  .input {
    &.inputActive {
      width: 20.75rem;
    }
  }
}
